{% extends "base.html" %}
{% block title %}{{ _('My Profile') }}{% endblock %}

{% block content %}
<section class="max-w-3xl mx-auto px-4 py-10">
  <h1 class="text-2xl font-semibold mb-6">{{ _('个人资料') }}</h1>

  <form method="post">
    {{ form.csrf_token }}

    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">

      <div>
        <label class="block text-sm mb-1">ID</label>
        <div class="flex gap-2">
          <input value="{{ current_user.id }}" readonly
            class="w-full border rounded p-2 bg-gray-100 text-gray-700 cursor-default select-all">
          <button type="button" class="px-3 rounded border"
            onclick="navigator.clipboard.writeText('{{ current_user.id }}')">
          {{ _('复制') }}
          </button>
        </div>
      </div>

      <div>
        <label class="block text-sm mb-1">{{ _('用户名') }}</label>
        {{ form.username(class="w-full border rounded p-2") }}
        {% for e in form.username.errors %}
        <p class="text-red-600 text-sm mt-1">{{ e }}</p>
        {% endfor %}
      </div>

      <div>
        <label class="block text-sm mb-1">{{ _('邮箱') }}</label>
        {{ form.email(class="w-full border rounded p-2") }}
        {% for e in form.email.errors %}
        <p class="text-red-600 text-sm mt-1">{{ e }}</p>
        {% endfor %}
      </div>

      <div>
        <label class="block text-sm mb-1">{{ _('收件人姓名') }}</label>
        {{ form.recipient_name(class="w-full border rounded p-2") }}
      </div>

      <div>
        <label class="block text-sm mb-1">{{ _('联系电话') }}</label>
        {{ form.phone(class="w-full border rounded p-2") }}
        {% for e in form.phone.errors %}
        <p class="text-red-600 text-sm mt-1">{{ e }}</p>
        {% endfor %}
      </div>

      <div>
        <label class="block text-sm mb-1">{{ _('邮编') }}</label>
        {{ form.postal_code(class="w-full border rounded p-2") }}
      </div>

      <div class="md:col-span-2">
        <label class="block text-sm mb-1">{{ _('收货地址') }}</label>
        {{ form.shipping_address(class="w-full border rounded p-2 h-28") }}
      </div>
    </div>

    <div class="mt-6">
      {{ form.submit(class="px-4 py-2 bg-emerald-700 text-white rounded") }}
    </div>
  </form>
</section>
{% endblock %}
